<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位窗口</title>
    <link rel="stylesheet" href="../lib/jquery.mobile-1.4.5.min.css">
    <script src="../lib/jquery-1.11.3.min.js"></script>
    <script src="../lib/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>定位窗口</h1>
        </div>

        <div data-role="main" class="ui-content">
            <a href="#myPopup1" data-rel="popup" class="ui-btn ui-btn-inline ui-cornet-all" data-position-to="window">弹窗窗口显示</a>
        <div data-role="main" class="ui-content">
            <a href="#myPopup2" data-rel="popup" class="ui-btn ui-btn-inline ui-cornet-all" data-position-to="#demo">弹窗显示</a>
        </div>


        <div data-role="popup" id="myPopup1">我显示在窗口的中间位置。</div>
        <div data-role="popup" id="myPopup2">我显示在 id= "demo"的元素上。</div>


        <p>这是一个段落</p>
        <p>这是另外一个段落</p>
        <p>这还是一个段落</p>
        <p>这是一个段落。这个段落包含了子元素，这是一个插入在段落中 id="demo"的<span id="demo" style="color: red;">元素。</span></p>


        <div data-role="footer">
            <h1>底部文本</h1>
        </div>
    </div>
</body>
</html>